//  富文本编辑器组件
<template>
  <div class="edit">
    <quill-editor v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
      :style="{height:height+'px'}">
    </quill-editor>
    <el-upload class="avatar-uploader"
      style="display:none"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :http-request="sendChange">
      <el-button class="edit-btn"></el-button>
    </el-upload>
  </div>
</template>

<script>
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction

  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image", "video"],
  ["clean"] // remove formatting button
];
import { upimg } from "@/public/js/setting";
export default {
  components: {},
  props: {
    height: {
      type: Number,
      default: 300
    },
    value:{
      type:String,
      default:''
    }
  },
  watch:{
    value(content){
      this.content = content;
    }
  },
  computed:{
    renderContent(){
      this.content = this.value;
      return this.content
    }
  },
  data() {
    return {
      photoPath: "",
      content: this.value,
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function(value) {
                if (value) {
                  // 调用iview图片上传
                  document.querySelector(".edit-btn").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      }
    };
  },
  computed: {},
  methods: {
    onEditorChange(){
      this.$emit('input',this.content)
    },
    sendChange(e) {
      var reader = new FileReader();
      reader.readAsDataURL(e.file);
      reader.onload = e => {
        let photoPath = e.target.result;
        upimg({
          nowPath: photoPath,
          oldPath: ""
        }).then(res => {
          this.photoPath = res.data.path;
          let quill = this.$refs.myQuillEditor.quill;
          // 如果上传成功
          if (res) {
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, "image", this.photoPath);
            // 调整光标到最后
            quill.setSelection(length + 1);
          } else {
            // 提示信息，需引入Message
            Message.error("图片插入失败");
          }
        });
      };
    }
  },
  created() {},
  mounted() {
   
  }
};
</script>
<style lang="scss" scoped>
.edit {
  padding-bottom: 60px;
  width:750px;
}
</style>